<template>
  <view class="cart-container">
    <my-address></my-address>
    <!-- 购物车商品列表的标题区域 -->
    <view class="cart-title">
      <!-- 左侧的图标 -->
      <uni-icons type="shop" size="18"></uni-icons>
      <!-- 描述文本 -->
      <text class="cart-title-text">购物车</text>
    </view>

    <block v-for="(goods, i) in cart" :key="i">
      <uni-card is-full :is-shadow="false">
        <!-- <text class="uni-h6">通过滑动触发选项的容器，容器内可放置列表等组件，通过左右滑动来触发一些操作。</text> -->
      </uni-card>
      <uni-section title="基本用法" type="line"></uni-section>

      <uni-swipe-action>
        <uni-swipe-action-item :left-options="options2" @click='bindClick'>
          <my-goods @updateCount="updateCount2" @updateState='updateState2' :numFlag='true' :chkFlag='true'
            :goods="goods"></my-goods>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </block>


    <my-settle></my-settle>

  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import tarBar from '../../mixins/tabBar.js'

  export default {
    mixins: [tarBar],
    data() {
      return {
        options2: [{
            text: '取消',
            style: {
              backgroundColor: '#007aff'
            }
          },
          {
            text: '确认',
            style: {
              backgroundColor: '#F56C6C'
            }
          },
          {
            text: '编辑',
            style: {
              backgroundColor: '#188C6C'
            }
          }
        ],
      };
    },
    computed: {
      ...mapState('cart', ['cart'])
    },
    methods: {
      ...mapMutations('cart', ['updateState', 'updateCount']),
      updateState2(goods) {
        this.updateState(goods)
      },
      updateCount2(goods) {
        console.log(goods, 8);
        this.updateCount(goods)
      },
      bindClick(e) {
        console.log(e, 123);
        uni.showToast({
          title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
          icon: 'none'
        });
      },
    },

    onReady() {},

  }
</script>

<style lang="scss">
  .cart-title {
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-left: 5px;
    border-bottom: 1px solid #efefef;

    .cart-title-text {
      margin-left: 10px;
    }
  }
  .cart-container {
    padding-bottom: 50px;
  }
</style>
